/*
 * @Author: liu wang wang
 * @Date: 2020-07-13 13:59:10
 * @LastEditTime: 2020-07-17 11:20:17
 * @LastEditors: liu wang wang
 * @Description: 选择版本弹窗类
 * @FilePath: \st-sdk-js\src\components\ChooseVersion.ts
 */
import Common from '../utils/Common';
import versionList from './VersionList';
import { VerisonListInterface, chooseInterface } from '../../types';
import api from '../api';
import store from '../utils/store';
import msg from '../utils/Msg';
class Choose extends Common {
    protected theme: string = '#fff';
    protected versionList: VerisonListInterface = [];
    constructor() {
        super();
    }

    protected getList(keyword?: string, callback?:Function):void{
        api.getList({
            params: {
                keyword: keyword
            },
            success: (res: any) => {
                if (res.code === 200) {
                    let versions = res.data;
                    this.versionList = versions.map(({ id, versionName }: { id: number, versionName: string }) => {
                        return {
                            id,
                            name: versionName,
                            checked: false
                        }
                    });
                    callback && callback()
                } else {
                    msg.msg(res.message);
                }
            }
        });
    }
    // 版本列表区
    protected getVersionList(): HTMLElement {
        const content: HTMLElement = this.createDiv();
        const contentStyle: string = `
            width:100%;
            background:#F4F4F4;
            border-radius:4px;
            border:1px solid rgba(203,203,203,1);
            box-sizing:border-box;
            overflow:hidden;
            height:315px;
            position:relative;
        `;
        const versionListBox = this.createDiv();
        versionListBox.id='now-version-list'
        versionListBox.appendChild(versionList.getVersionList(this.versionList));
        const versionListBoxStyle = `
            width:100%;
            height:265px;
            margin-top:50px;
            overflow-x: hidden;
            overflow-y: scroll;
        `;
        this.setStyle(versionListBox, versionListBoxStyle);
        this.setStyle(content, contentStyle);
        content.appendChild(versionList.getSearch({
            theme: this.theme,
            callback: (keyword: string) => {
                this.getList(keyword,()=>{
                    this.resetVersionList();
                });
            }
        }));
        content.appendChild(versionListBox);
        return content;
    }
    // 重置版本列表
    protected resetVersionList(): void {
        const versionlist = versionList.getVersionList(this.versionList);
        const versionListBox = document.getElementById('now-version-list');
        (versionListBox as HTMLElement).innerHTML = '';
        (versionListBox as HTMLElement).appendChild(versionlist);
    }
    // 按钮区
    protected getBtns(success: Function, gotoCreate?: Function): HTMLElement {
        const btnsBox: HTMLElement = this.createDiv();
        this.setStyle(btnsBox, 'overflow:hidden;margin-top:20px;');
        const sureBtn: HTMLElement = this.getButton({
            width: 88,
            height: 30,
            text: '确定',
            background: this.theme,
            color: '#fff',
            clickHandle: () => {
                success && success({
                    data:store.getStore('versionID')
                });
            }
        });
        this.setStyle(sureBtn, 'float:left;margin-right:20px;');
        const editInfoBtn: HTMLElement = this.getButton({
            width: 88,
            height: 30,
            text: '创建新版本',
            clickHandle: () => {
                gotoCreate && gotoCreate();
            }
        })
        this.setStyle(editInfoBtn, 'float:left; border:1px solid rgba(203,203,203,1);');
        const setToOtherBtn: HTMLElement = this.getButton({
            width: 88,
            height: 30,
            text: '取消',
            clickHandle: () => {
                this.close();
                store.getStore('close') && store.getStore('close')();
            }
        })
        this.setStyle(setToOtherBtn, 'float:right; border:1px solid rgba(203,203,203,1);');
        btnsBox.appendChild(sureBtn);
        btnsBox.appendChild(editInfoBtn);
        btnsBox.appendChild(setToOtherBtn);
        return btnsBox;
    }

    // 初始化
    public init({ theme, success, gotoCreate }: chooseInterface): HTMLElement {
        this.theme = theme;
        this.getList('',()=>{
            this.resetVersionList();
        });
        const chooseContent = this.createDiv();
        const versionList = this.getVersionList();
        const tips = this.createP();
        tips.innerText = '请选择要在版本中心上架的版本，如果没有，请先创建版本。';
        this.setStyle(tips, 'color:#E02020;font-size:12px;margin:12px 0px 28px;');
        const btns = this.getBtns(success, gotoCreate);
        chooseContent.appendChild(versionList);
        chooseContent.appendChild(tips)
        chooseContent.appendChild(btns);
        return chooseContent;
    }
}

export default Choose;
